import { Component, createSignal, getOwner, runWithOwner } from 'solid-js'
import S from './Top.module.styl'
import { Hud } from './View'
import { useGame } from './game'
import Record from './Record'
import Dialog, { Content } from './Dialog'
import Settings from './Settings'
import About from './About'
import Stat from './Stat'

const Top: Component = () => {
  const { rematch } = useGame()
  const [dialogContent, setDialog] = createSignal<Content>()

  // 应当在打开弹窗后再实例化组件，避免资源消耗
  // 同时，需要维护owner以正确实例化
  const owner = getOwner()
  const toPopDialog = (title: string, Comp: Component) => () =>
    runWithOwner(owner, () => setDialog({ title, ele: <Comp></Comp> }))

  return <>
    <Hud>
      <div class={S.btn} onClick={rematch}>重来</div>
      <div class={S.btn} onClick={toPopDialog('设置', Settings)}>设置</div>
      <div class={S.btn} onClick={toPopDialog('记录', Record)}>记录</div>
      <div class={S.btn} onClick={toPopDialog('统计', Stat)}>统计</div>
      <div class={S.btn} onClick={toPopDialog('关于', About)}>关于</div>
    </Hud>
    <Dialog onCancel={() => setDialog()}>{dialogContent()}</Dialog>
  </>
}

export default Top
